import { Button, Result } from 'antd'
import { ButtonType } from 'antd/lib/button'
import { ResultStatusType } from 'antd/lib/result'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.scss'

type PropsType = Partial<
  Record<'title' | 'subTitle' | 'navigatePath' | 'buttonText', string> & {
    buttonType: ButtonType
    status: ResultStatusType
    icon: React.ReactNode
  }
>

export default function ResultPage({ status = '404', title = '404', subTitle = '抱歉, 您访问的页面不存在', buttonType = 'primary', navigatePath = '/', buttonText, icon }: PropsType) {
  const navigate = useNavigate()
  return (
    <div className={styles['result-page']}>
      <Result
        icon={icon}
        status={status}
        title={title}
        subTitle={subTitle}
        extra={
          <Button type={buttonType} onClick={() => navigate(navigatePath)}>
            {buttonText}
          </Button>
        }
      />
    </div>
  )
}
